import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex} from '@ant-design/react-native';
import {connect} from 'react-redux';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};

class LoginSelect extends Component {
    static navigationOptions = {
        title: '',
        headerTransparent: true,
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {};
    }

    render() {
        if (this.props.userinfo.token !== '') {
            return this.props.navigation.navigate('NavigatorTab');
        }
        return (
            <ScrollView style={{flex: 1}}>
                <Image
                    style={styles.images}
                    source={require('~/assets/public/tu-12x.png')}
                />
                <WhiteSpace size="xl" />
                <Flex direction="column" justify="center">
                    <WhiteSpace size="xl" />
                    <Flex
                        justify={'center'}
                        align={'center'}
                        style={styles.button1}
                        onPress={() => {
                            this.props.navigation.navigate('Login');
                        }}>
                        <Text style={styles.butext}> 登陆</Text>
                    </Flex>
                    <WhiteSpace size="xl" />
                    <Flex
                        justify={'center'}
                        align={'center'}
                        style={styles.button2}
                        onPress={() => {
                            this.props.navigation.navigate('Sign');
                        }}>
                        <Text style={styles.butext}> 注册</Text>
                    </Flex>
                </Flex>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    images: {
        width: '100%',
        height: 400,
    },
    button1: {
        width: 300,
        height: 44,
        borderRadius: 5,
        borderColor: '#EC4F46',
        backgroundColor: '#EC4F46',
    },
    butext: {
        color: '#F8F8F8',
        fontSize: 15,
    },
    button2: {
        width: 300,
        height: 44,
        borderRadius: 5,
        backgroundColor: '#F2BC38',
        borderColor: '#F2BC38',
    },
});
export default connect(mapGetter)(LoginSelect);
